<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/mainTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">
    <ui:define name="top">
        <h:outputLabel value="Dirección" class="tituloPrincipal"/>
    </ui:define>

    <ui:define name="left">
    </ui:define>
    <ui:define name="content">
        <h:form id="contenido" prependId="false">
            <p:panel header="Direccion" id="panelDireccion">
                <p:panelGrid columns="2" id="paneGridlDireccion">
                    <h:outputLabel value="Calle Secundaria"/>
                    <p:inputText value="#{DireccionAction.direccion.calleSecundaria}"/>

                    <h:outputLabel value="Calle Principal"/>
                    <p:inputText value="#{DireccionAction.direccion.callePrincipal}"/>          

                    <h:outputLabel value="Ciudad"/>
                    <p:selectOneMenu id="menuciudad" value="#{DireccionAction.ciudadsel}" panelStyle="width:150px"  converter="CiudadConverter"
                                     var="c" style="width:160px"  filter="true" filterMatchMode="startsWith">  
                        <f:selectItem itemLabel="Seleccionar" itemValue="" />  
                        <f:selectItems value="#{DireccionAction.ciudades}" var="CiudadConverter" itemLabel="#{CiudadConverter.nombre}" itemValue="#{CiudadConverter}"/>
                        <p:column>  
                            #{c.nombre}
                        </p:column>  
                    </p:selectOneMenu>  

                    <h:outputLabel value="Latitud"/>
                    <p:inputText id="lat" value="#{DireccionAction.direccion.latitud}" disabled="true" />

                    <h:outputLabel value="Longitud"/>
                    <p:inputText id="lon" value="#{DireccionAction.direccion.longitud}" disabled="true"/>

                    <h:outputLabel value="Numeracion"/>
                    <p:inputText value="#{DireccionAction.direccion.numeracion}" />

                    <h:outputLabel value="Referencia"/>
                    <p:inputText value="#{DireccionAction.direccion.referencia}" />

                    <p:commandButton id="showDialogButton" type="button" value="#{DireccionAction.añadirNuevoCliente()}" onclick="dlg.show()" ajax="false"/>  
                    <p:inputText id="idcliente" value="#{DireccionAction.clientesel.cedulaRuc}" />

                    <p:dialog id="dialogAnadirCliente" header="CLIENTE" widgetVar="dlg" resizable="false">  
                        <p:dataTable paginator="true" rows="20" var="cliente" value="#{DireccionAction.clientes}" >
                            <f:facet name="header">  
                                CLIENTES
                            </f:facet>  
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="CEDULA/RUC"/>
                                </f:facet>
                                <h:outputText value="#{cliente.cedulaRuc}"/>
                            </p:column>
                            <p:column filterBy="#{cliente.nombres}" filterMatchMode="contains">
                                <f:facet name="header">
                                    <h:outputText value="Nombres"/>
                                </f:facet>
                                <h:outputText value="#{cliente.nombres}"/>
                            </p:column>
                            <p:column filterBy="#{cliente.apellidos}" filterMatchMode="contains">
                                <f:facet name="header">
                                    <h:outputText value="Apellidos"/>
                                </f:facet>
                                <h:outputText value="#{cliente.apellidos}"/>
                            </p:column>
                            <p:column filterBy="#{cliente.descuento}" filterMatchMode="contains">
                                <f:facet name="header">
                                    <h:outputText value="Descuento"/>
                                </f:facet>
                                <h:outputText value="#{cliente.descuento}"/>
                            </p:column>
                            <p:column filterBy="#{cliente.email}" filterMatchMode="contains">
                                <f:facet name="header">
                                    <h:outputText value="Email"/>
                                </f:facet>
                                <h:outputText value="#{cliente.email}"/>
                            </p:column>
                            <p:column filterBy="#{cliente.fechaNacimiento}" filterMatchMode="contains">
                                <f:facet name="header">
                                    <h:outputText value="Fecha de Nacimiento"/>
                                </f:facet>
                                <h:outputText value="#{cliente.fechaNacimiento}"/>
                            </p:column>
                            <p:column style="width:4%">  
                                <p:commandButton id="selectButton" onclick="#{DireccionAction.añadirNuevoClienteAgregar(cliente)}" icon="ui-icon-search" title="View">  
                                    <f:setPropertyActionListener value="#{cliente}" target="#{DireccionAction.clientesel}" />  
                                </p:commandButton>  
                            </p:column>  
                        </p:dataTable>                      
                    </p:dialog> 

                    <h:panelGroup/>
                    <p:panelGrid columns="2">
                        <p:commandButton value="Guardar" action="#{DireccionAction.guardar()}"/>
                        <p:commandButton value="Cancelar" action="#{DireccionAction.cancel()}"/>
                    </p:panelGrid>

                    <h:panelGroup/>                                        

                </p:panelGrid>       
                <!-- <h:outputLabel value="Latitud"/>
                <p:inputText id="lat" value="#{direccionAction.direccion.latitud}" />
                <h:outputLabel value="Longitud"/>
                <p:inputText id="lon" value="#{direccionAction.direccion.longitud}" disabled="true"/>-->
                <p:messages id="messagesgproducto" showDetail="true" autoUpdate="true" closable="true" > 
                    <p:effect type="fade" event="load" delay="3000" />
                </p:messages> 

                <p:gmap center="-2.897095,-79.002712" zoom="15" type="ROADMAP" style="width:600px;height:400px">  

                    <!--<p:ajax event="stateChange" listener="#{DireccionAction.onStateChange}" update="messagesgproducto, lat, lon" />  -->
                    <p:ajax event="pointSelect" listener="#{DireccionAction.onPointSelect}" update="messagesgproducto, @form" />  

                </p:gmap>  
                <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
            </p:panel>
        </h:form>
    </ui:define>

</ui:composition>